<template>
  <div class="message">
    <van-nav-bar title="消息" left-arrow @click-left="$router.history.go(-1)">
      <span slot='left' class="topleftIcon"><img src='../../../public/images/qt_75.png'/></span>
    </van-nav-bar>
    <!-- <div class="contentNav">
        <van-list
        v-model="loading"
        :finished="finished"
        @load="onLoad"
        :immediate-check="false"
        finished-text="没有更多了">
            <div class="message-box">
                <div v-for="(item,index) in messages" :key="index" class="item" :class="index===(messages.length-1) ? '':'line'">
                    <div class="item-img">
                        <img class="item-img" src="../../../public/images/qt_36.png" alt="">
                        <div v-if="item.hasRead==1" class="dot"></div>
                    </div>
                    
                    <div class="txt-box">
                        <p class="txt-tit">您的评论有新的回复</p>
                        <p class="txt-desc">{{item.desc}}</p>
                        <div class="txt-news" v-if="item.newMessage">
                            {{item.newMessage}}
                        </div>
                        <p class="txt-time">{{item.createTime}}</p>
                    </div>
                </div>
            </div>
        </van-list>
    </div> -->
    <van-cell title="系统通知" icon="edit" is-link class="mt-20" @click='$router.push({path:"message1",query:{noticeType:3}})'>
      <span slot="icon" class="icons"><div class="tips" v-if='messageStatus1'></div><img src='../../../public/images/message2.png'/></span>
    </van-cell>
    <van-cell title="评论" icon="edit" is-link @click='$router.push({path:"message2",query:{noticeType:1}})'>
      <span slot="icon" class="icons"><div class="tips" v-if='messageStatus2'></div><img src='../../../public/images/message3.png'/></span>
    </van-cell>
    <van-cell title="留言" icon="edit" is-link @click='$router.push({path:"message1",query:{noticeType:2}})'>
      <span slot="icon" class="icons"><div class="tips" v-if='messageStatus3'></div><img src='../../../public/images/message4.png'/></span>
    </van-cell>
    <van-cell title="点赞" icon="edit" is-link class="mt-20" @click='$router.push({path:"message1",query:{noticeType:0}})'>
      <span slot="icon" class="icons"><div class="tips" v-if='messageStatus4'></div><img src='../../../public/images/message1.png'/></span>
    </van-cell>
  </div>
</template>

<script>

export default {
  name: "message",   
  data() {
    return {
        loading: false,
        finished: false,
        isLoading:false,
        sizes:10,
        pages:1,
        order:[],
        messages: [
            {hasRead:1, image: require("../../../public/images/qt_36.png"), tit: "系统通知",desc:"您的推送已关闭，可能会错过重要资讯通知",createTime:"2019-7-2 12:21" },
            {hasRead:1, image: require("../../../public/images/qt_39.png"), tit: "系统通知",desc:"您的推送已关闭，可能会错过重要资讯通知",createTime:"2019-7-2 12:21",newMessage:'我觉得湖人今年是冠军' },
            {hasRead:1, image: require("../../../public/images/qt_36.png"), tit: "系统通知",desc:"您的推送已关闭，可能会错过重要资讯通知",createTime:"2019-7-2 12:21" },
            {hasRead:1, image: require("../../../public/images/qt_39.png"), tit: "系统通知",desc:"您的推送已关闭，可能会错过重要资讯通知",createTime:"2019-7-2 12:21",newMessage:'我觉得湖人今年是冠军' },
            {hasRead:1, image: require("../../../public/images/qt_36.png"), tit: "系统通知",desc:"您的推送已关闭，可能会错过重要资讯通知",createTime:"2019-7-2 12:21" },
            {hasRead:1, image: require("../../../public/images/qt_39.png"), tit: "系统通知",desc:"您的推送已关闭，可能会错过重要资讯通知",createTime:"2019-7-2 12:21",newMessage:'我觉得湖人今年是冠军' }
        ],
        messageStatus1:false,
        messageStatus2:false,
        messageStatus3:false,
        messageStatus4:false,
    };
  },
  created(){
      this.getMessage();
  },
  methods: {
    getMessage(){
        this.pages=1;
        this.$get(this.$api.user.notices,{page:this.pages,size:this.sizes,noticeType:''}).then(data=>{
          data.data.curPageData.forEach((item,index)=>{
            if(item.noticeType==0 && item.hasRead==1) this.messageStatus4=true;
            if(item.noticeType==1 && item.hasRead==1) this.messageStatus2=true;
            if(item.noticeType==2 && item.hasRead==1) this.messageStatus1=true;
            // if(item.noticeType==0 && item.hasRead==1) this.messageStatus3=true;
          });
          this.order=data.data.curPageData
        })
    },
    onLoad() {
      setTimeout(() => {
        this.$get(this.$api.user.notices,{page:this.pages,size:this.sizes,noticeType:''}).then(data=>{
          if((Number(this.pages)-1)*this.sizes<data.data.totalNum){
            for (let i = 0; i < data.data.curPageData.length; i++) {
              this.order.push(data.data.curPageData[i]);
            };
            console.log(this.order);
            this.loading = false;
          }else{
            this.loading = false;
            this.finished  = true;
          }
          this.pages++;
        })
      }, 500);
    },
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.message-box{
    padding:0 .3rem;
}
.message-box .item{
    padding: .4rem 0;
    display: flex;
}
.message-box .item .item-img{
    width: .56rem;
    display: block;
    padding: 0.05rem 0.1rem 0 0;
    position: relative;
}
.message-box .item .item-img .dot{
    width: 0.08rem;
    height: 0.08rem;
    border-radius: 50%;
    position: absolute;
    top: .1rem;
    right:.1rem;
    background-color: red;
}
.message-box .item .item-img img{
    width: .56rem;
    display: block;
}
.message-box .item .txt-box{
    font-size:.26rem;
    color:rgba(50,51,51,1);
}
.txt-tit{
    font-size:.34rem;
}
.txt-desc{
    
color:rgba(136,136,136,1);
padding: 0.1rem 0;
}
.txt-time{
    font-size:.2rem;
color:rgba(136,136,136,1);
    padding-top: .1rem;
}
.txt-news{
    width: 100%;
    background:rgba(247,247,247,1);
    padding: .26rem .2rem .26rem .2rem;
    border-radius: .04rem;
    margin: .1rem 0;
}



.line{
    border-bottom:1px solid rgba(242,242,242,1);
}

.icons img{height: 0.6rem;margin-right: 0.25rem;}
</style>
